<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>华富</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
</head>
<style>
  html,body {
    font-size: 1.2rem;
    background: #ffffff;
    color: #333333 !important
  }

  .h10{
    width: 100%;
    height: 0.5rem;
    display: -webkit-box;
    clear: both;
    background: #f5f5f5
  }
    .aui-active .aui-bar-tab-label{
      color: #f5a51c
    }


    [v-cloak] {
        display: none;
    }
    header,.aui-bar,.aui-bar-nav{
      font-size: 1.2rem;
      color: #333 !important;
      background:#fff;
      box-shadow: 0rem 0rem 0.8rem 0rem
		rgba(126, 126, 126, 0.52);
    border-bottom: none;
    margin-top: 0 !important;
    }
    .aui-pull-left{
      font-size: 1.2rem;
    }
    .aui-pull-left .aui-iconfont{
      font-size: 1.2rem;

    }
    .aui-searchbar{
      background-color: transparent !important;
      height:4.4rem;
    }
    .aui-searchbar-input{
      height:2.8rem;
      line-height: 2.8rem;
      padding-left:0.9rem;
      margin: 0 0 0 3.3rem;
      border-radius: 0.3rem;
      position: relative;
    }
    .aui-bar-nav .aui-title{
      right: 4rem;
      left: 0rem;
    }
    body {background: #F6F6F9;color: #333;margin: 0 auto;font-weight: normal;}
    ul,ol{list-style: none;padding: 0px;margin: 0px;;}


    /*滚动条样式*/
    .scrollbar-none::-webkit-scrollbar {/*滚动条宽度设置*/
        width: 0px;height: 0;
    }
    header, .aui-bar-nav{
      padding-top:0;
    }
    .aui-searchbar .aui-iconfont{
      line-height: 2.8rem;
      margin-right: 1rem;
      color: #9e9e9e !important;
      font-size: 1.6rem;
    }
    .aui-searchbar-input input{
      height: 2.8rem;
      font-size: 1.3rem;
    }
    .aui-bar-nav .aui-pull-right.class_nav{
      top:1.3rem;
      right:1.3rem;
      padding:0;
      height:1.6rem;
      line-height: 1.6rem;
    }
    .aui-bar-nav .aui-pull-left.class_nav1{
      top:1.3rem;
      left:1.3rem;
      padding:0;
      height:1.7rem;
      line-height: 1.7rem;
    }
    .class_nav img{
      height:1.7rem;
    }
    .class_nav1 img{
      height:1.7rem;
    }
    .class_nav span{
      position: absolute;
      top: -0.5rem;
      right: -0.5rem;
      width: 1.2rem;
    	height: 1.2rem;
      line-height: 1.2rem;
    	background-color: #ed6a20;
      font-size:1rem;
      color:#fff;
      border-radius: 100%;
    }
    .class_nav_title .shao{
      position: absolute;
      width:1.3rem;
      top:0.75rem;
      right:0.75rem;
    }
    .con1{
      padding-top:6.9rem;
      background:#fafafa;
    }

    /**/
    .shopClassify_nav{
      border:1px solid #eeeeee;
      position: relative;
      z-index: 3;
    }

    .shopClassify_nav .aui-tab-item.aui-active {
        border-bottom: none;
    }

    .shopClassify_nav .aui-tab-item{
        color: #666;
        font-size: 0.7rem;
        font-weight: 600;
        height:4.4rem;
        line-height: 4.4rem;
        position: relative;
    }
    .shopClassify_nav .aui-tab-item.qiehuan::after{
      content: '';
      position: absolute;
      top:20%;
      right:0;
      width:0.1rem;
      height:60%;
      background: #e7e7e7;
    }
    .shopClassify_nav .aui-tab-item.qiehuan img{
      width: 1.65rem;
      margin: 0 auto;
      margin-top: 1.3rem;
    }
    .shopClassify_nav .aui-tab-item.shaixuan span{
      display: inline-block;
    }
    .shopClassify_nav .aui-tab-item.shaixuan img{
      display: inline-block;
      width:1.4rem;
    }
    .shopClassify_nav .aui-tab-item.aui-active {
        color: #ed6a20;
    }
    .shopClassify_nav .aui-tab-item {
        color: #000;
        font-size:1.4rem;
    }

    .shopClassify_nav .aui-tab-item.uown::before {
        content: '';
        border: 4px solid transparent;
        border-bottom: 5px solid #999;
        position: absolute;
        left: 72%;
        top: 0;
        bottom: 0px;
        margin: auto;
        height: 0;
        width: 0;
        transform: translateY(-60%);
    }

    .shopClassify_nav .aui-tab-item.uown::after {
        content: '';
        border: 4px solid transparent;
        border-top: 5px solid #999;
        position: absolute;
        left: 72%;
        top: 0;
        bottom: 0;
        margin: auto;
        height: 0;
        width: 0;
        transform: translateY(60%);
    }

    .shopClassify_nav .aui-tab-item.aui-active.uown.up::before {
        border-bottom-color: #ed6a20;
        /*border-bottom: 5px solid #ff0137;*/
    }

    .shopClassify_nav .aui-tab-item.aui-active.uown.down::after {
        border-top-color: #ed6a20;
        /*border-top: 5px solid #ff0137;*/
    }

    /***商品列表**/
    .shopClassify_sec1{
      margin-top:1rem;
      /*display: block;*/
    }
    .shopClassify_sec1 ul li{
      width:50%;
      float:left;
      padding:0 0.4rem;
      margin-bottom: 0.8rem;
    }
    .shopClassify_sec1 ul li .shopClassify_sec1_list{
      background-color: #ffffff;
      	box-shadow: 0.03rem 0.05rem 0.35rem 0.01rem
      		rgba(0, 0, 0, 0.08);
      	border-radius: 0.5rem;
    }
    .shopClassify_sec1_list_img{
      width:100%;
      height:17.9rem;
    }
    .shopClassify_sec1_list_img img{
      width:100%;
      height:100%;
    }
    .shopClassify_sec1_list_txt{
      padding:1rem;
      min-height: 12rem;
    }
    .shopClassify_sec1_list_txt1{
      font-size:1.3rem;
      color:#0a0a0a;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      line-height: 2.2rem;
    }
    .shopClassify_sec1_list_txt1 span.tab{
      display: inline-block;
      font-size:1.2rem;
      line-height: 1;
      color:#fff;
      padding:0.2rem 0.45rem;
      background:#ed6a20;
      border-radius: 0.2rem;
      vertical-align: middle;
    }
    .shopClassify_sec1_list_txt1 span.title{
      display: inline-block;
      font-size:1.3rem;
      color:#0a0a0a;
      line-height: 1;
      vertical-align: middle;
    }
    .shopClassify_sec1_list_txt2{
      margin-top:0.7rem;
    }
    .shopClassify_sec1_list_txt2 span.wuliu{
      float:left;
      font-size:1rem;
      color:#ed6a20;
      line-height: 1;
      padding:0.1rem 0.35rem;
      border-radius: 0.6rem;
	    border: solid 0.05rem #ed6a20;
    }
    .shopClassify_sec1_list_txt2 span.address{
      float:right;
      font-size:1.1rem;
      line-height: 1;
      color:#9e9e9e;
    }
    .shopClassify_sec1_list_txt3{
      margin-top:0.7rem;
    }
    .shopClassify_sec1_list_txt3 span.price{
      font-size:1.5rem;
      color:#f01818;
      font-weight: 600;
      line-height: 1;
      vertical-align: middle;
    }
    .shopClassify_sec1_list_txt3 span.price i{
      font-style:normal;
      font-size:1.3rem;
      font-weight: normal;
    }
    .shopClassify_sec1_list_txt3 span.yishou{
      font-size:1rem;
      color:#666666;
      line-height: 1;
      vertical-align: middle;
      margin-left:0.8rem;
    }
    .shopClassify_sec1_list_txt4{
      margin-top:1rem;
    }
    .shopClassify_sec1_list_txt4 span{
      font-size:1rem;
      color:#333333;
      line-height: 1;
    }
    .shopClassify_sec1_list_txt4 span.haoping{
      margin-left:0.2rem;
    }
    .shopClassify_sec1_list_txt4 span.haoping i{
      font-size: 0.8rem;
      color: #333;
      vertical-align: middle;
    }

    /***商品列表横排**/

    .shopClassify_sec2 ul li{
      padding:1rem;
      background:#fff;
      border-bottom: 1px solid #f5f5f5;
    }
    .shopClassify_sec2_list_img{
      width:14.65rem;
      height:14.65rem;
    }
    .shopClassify_sec2_list .aui-media-list-item-inner{
      display: -webkit-box;
    }
    .shopClassify_sec2_list_txt{
      width:calc(100% - 16rem);
      margin-left:1.35rem;
    }
    .shopClassify_sec2_list_txt5{
      margin-top:0.8rem;
      font-size:1.2rem;
      color:#666666;
      line-height: 1;
    }
    .shopClassify_sec2_list_txt2{
      margin-top:0.7rem;
    }
    .shopClassify_sec2_list_txt2 span.wuliu{
      float:left;
      font-size:1rem;
      color:#ed6a20;
      line-height: 1;
      padding:0.1rem 0.35rem;
      border-radius: 0.6rem;
	    border: solid 0.05rem #ed6a20;
    }
    .shopClassify_sec2_list_txt2 span.address{
      float:right;
      font-size:1.1rem;
      line-height: 1;
      color:#9e9e9e;
    }
    .shopClassify_sec2_list_txt3{
      margin-top:2.9rem;
    }
    .shopClassify_sec2_list_txt3 span.price{
      font-size:1.5rem;
      color:#f01818;
      font-weight: 600;
      line-height: 1;
      vertical-align: middle;
    }
    .shopClassify_sec2_list_txt3 span.price i{
      font-style:normal;
      font-size:1.3rem;
      font-weight: normal;
    }
    .shopClassify_sec2_list_txt3 span.yishou{
      font-size:1rem;
      color:#666666;
      line-height: 1;
      vertical-align: middle;
      margin-left:0.4rem;
    }
    .shopClassify_sec2_list_txt4{
      margin-top: 0.7rem;
    }
    .shopClassify_sec2_list_txt4 span{
      font-size:1rem;
      color:#333333;
      line-height: 1;
    }
    .shopClassify_sec2_list_txt4 span.haoping{
      margin-left:0.6rem;
    }
    .shopClassify_sec2_list_txt4 span.haoping i{
      font-size: 0.8rem;
      color: #333;
      vertical-align: middle;
    }

    /**综合下拉**/
    .shopClassify_nav_bg{
      position: absolute;
      top: 4.5rem;
      left: -1%;
      width: 102%;
      z-index: 5;
    }
    .shopClassify_nav_con{
      background:#fff;
    }
    .shopClassify_nav_con ul li{
      padding:1.5rem 2.75rem;
      font-size:1.4rem;
      line-height: 1;
      color:#333333;
      position: relative;
    }
    .shopClassify_nav_con ul li img{
      display: none;
    }
    .shopClassify_nav_con ul li.on{
      color:#ed6a20;
    }
    .shopClassify_nav_con ul li.on img{
      display: block;
      position: absolute;
      width:1.4rem;
      top:1.6rem;
      right:1.3rem;
    }
    /*.shopClassify_nav_bg1{
      position: absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      background:#fff;
      opacity: 0;
      z-index: 2;
    }*/

    .shopClassify_nav_down{
      font-size:1rem;
      vertical-align: middle;
      margin-left:0.4rem;
    }


</style>
<body>
<div id="app" style="position:relative;" v-cloak>

  <header id="header_top" class="aui-bar aui-bar-nav " style="position:fixed;top:0;height:6.9rem;padding-top:2.5rem;">

    <div class="aui-title class_nav_title">
      <div class="aui-searchbar" id="search">
          <div class="aui-searchbar-input aui-border-radius" tapmode  style="background:#f6f6f6">
              <i class="aui-iconfont aui-icon-search"></i>
              <form action="javascript:;">
                  <input type="search" placeholder="请输入搜索内容" id="inputText" v-model="inputValue">
              </form>
              <div class="shao">
                <img src="../../image/search_icon1.png" alt="">
              </div>
          </div>

      </div>

    </div>
    <a class="aui-pull-right aui-btn class_nav">
        <img src="../../image/class/share_index_nav3.png" alt="">
        <span>5</span>
    </a>
    <a class="aui-pull-left aui-btn class_nav1" onclick="close_win()">
        <img src="../../image/back.png" alt="">
    </a>
  </header>
  <div class="aui-refresh-content">
  <div class="con1">
       <div class="shopClassify_nav_bg1"></div>
       <div class="shopClassify_nav">
         <div class="aui-tab" id="tab1">
              <div class="aui-tab-item aui-active">综合</div>
              <div class="aui-tab-item uown">销量</div>
              <div class="aui-tab-item uown">价格</div>
              <!-- <div class="aui-tab-item qiehuan">
                <img src="../../image/class/class_classify_nav1.png" alt="" v-if="flag3">
                <img src="../../image/class/class_classify_nav.png" alt="" v-if="!flag3">
              </div> -->
              <!-- <div class="aui-tab-item shaixuan">
                <span>筛选</span>
                <img src="../../image/class/class_classify_nav2.png" alt="">
              </div> -->
          </div>
         <!-- <div class="shopClassify_nav_bg" v-if="flag2">
           <div class="shopClassify_nav_con">
             <ul>
               <li class="on" @click="selZonghe(0)">综合 <img src="../../image/class/class_classify_nav3.png" alt=""></li>
               <li @click="selZonghe(1)">信用 <img src="../../image/class/class_classify_nav3.png" alt=""></li>
               <!-- <li>价格降序 <img src="../../image/class/class_classify_nav3.png" alt=""></li>
               <li>价格升序 <img src="../../image/class/class_classify_nav3.png" alt=""></li> -->
            <!-- </ul>
           </div>
         </div> -->
       </div>

       <div class="shopClassify_sec1" >
          <ul class="clearfix">
            <li @click="goDetail(items1.goods_id)" v-for="items1 in cateList">
              <div class="shopClassify_sec1_list">
                <div class="shopClassify_sec1_list_img">
                  <img :src=items1.pic2_pc alt="" width="100%">
                </div>
                <div class="shopClassify_sec1_list_txt">
                  <div class="shopClassify_sec1_list_txt1">
                    <span class="tab">{{items1.store_type==1?'褚氏':(items1.store_type==2?'代理':'个企')}}</span>
                    {{items1.goods_name}}
                  </div>
                  <div class="shopClassify_sec1_list_txt2 clearfix">
                     <span class="wuliu" v-if="items1.is_exp==1">包邮</span>
                     <span class="address">{{items1.store_city}}</span>
                  </div>
                  <div class="shopClassify_sec1_list_txt3">
                     <span class="price"><i>￥</i>{{items1.goods_price}}</span>
                     <span class="yishou">已售{{items1.virtual_sales}}</span>
                  </div>
                  <div class="shopClassify_sec1_list_txt4">
                     <span class="content">{{items1.store_type==1?'':items1.store_name}}</span>
                     <span class="haoping">{{items1.best_percent}}%好评<i class="aui-iconfont aui-icon-right"></i></span>
                  </div>
                </div>
              </div>
            </li>
          </ul>
       </div>

     </div>
	</div>

</div>
</body>
</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/axios.min.js"></script>
<script type="text/javascript" src="../../script/axios-config.js"></script>


<script type="text/javascript">
var app;
function doSearch(){
    var searchValue = document.getElementById("search-input").value;
    // if(searchValue){
    //     api.toast({
    //         msg: searchValue,
    //         duration: 2000,
    //         location: 'bottom'
    //     });
    //
    // }
}
  apiready = function(){


    app = new Vue({
        el: '#app',
        data: {
          allpage:1,
          page:1,
          cateList:[],
          inputValue:''
        },
        created: function() {
          api.showProgress({
              title: '努力加载中...',
              text: '先喝杯茶...',
              modal: false
          });

        },
        methods: {
          //输入
          inputMsg:function(){
            var _this = this
            $("#inputText").on("keypress",function(e){
              //console.log(e.keyCode)
                e.keyCode==13 ? _this.getList($('#inputText').val(),'') : ''
            })
          },
          //今日推荐
          getList:function(keywords,type){
            var _this = this
            var data={
              token:$api.getStorage('token') || "",
              key:keywords || "",
              page:1,
              num:6,
              sort:type || ""
            }
            Axios.post(window.Url.recommend_goods_list,data).then(function(res){
              console.log(JSON.stringify(res))
              if(res.status==1){
                _this.cateList = res.list.list;
                _this.allpage=res.list.all_page;
              }else if(res.status==0){
                $_this.cateList=[];
                api.toast({
                    msg:"暂无相关数据",
                    duration: 2000,
                    location: 'middle'
                });
              }else{
                toast.fail({
                  title:res.info,
                  duration:1000
                })
              }
            }).catch(function(err){
                 console.log(JSON.stringify(err))
            })
          },
        
          goDetail:function(goodsId){

            api.openWin({
                name:'classDetailHeader',
                url: '../class/class_detail_header.html',
                pageParam: {
                    goodsId:goodsId
                }
            });
          },
          nextPage:function(keywords,type){
            var $_this=this;

            //检测到达底部添加下一页内容
            var scroll = new auiScroll({
                listen:true, //是否监听滚动高度，开启后将实时返回滚动高度
                distance:40 //判断到达底部的距离，isToBottom为true
            },function(ret){
                if (ret.isToBottom) {
                    $_this.page ++
                    if ($_this.page > $_this.allpage) {
                        $_this.page = $_this.allpage
                        return
                    }
                    api.ajax({
                        url:window.hurl.list_new,
                        method: 'post',
                        data: {
                            values:{
                              token:$api.getStorage('token') || "",
                              key:keywords || "",
                              page:1,
                              num:6,
                              sort:type || ""
                            }
                        },
                        timeout: 300,
                    }, function(ret, err) {
                        if (ret) {
                            //  api.alert({ msg: JSON.stringify(ret) });
                            $_this.cateList = $_this.cateList.concat(ret.list.list)
                        } else {
                            api.alert({ msg: JSON.stringify(err) });
                        }
                    })
                }

            })
          }

        },
        mounted: function () {
          api.hideProgress();
          tabNav();
          setRefresh();
          this.getList()
          this.inputMsg()
        },
        watch:{
          inputValue:function(e){
            if(e==""){
              this.getList()
            }
          }
        }
      })

  }

  //刷新
  function setRefresh(){
      var pullRefresh = new auiPullToRefresh({
          container: document.querySelector('.aui-refresh-content'),
          triggerDistance: 100
      }, function(ret) {

          if (ret.status == "success") {
              setTimeout(function() {
                  pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
              }, 1500)
          }
      })
  }

  function tabNav() {
      var _this = this
      var prevIndex = 1
      var tab1 = new auiTab({
          element: document.getElementById("tab1"),
          repeatClick: true
      }, function(ret) {
        if (ret.index == 1) {
            app.getList()
            $('.shopClassify_nav .aui-tab-item').eq(1).removeClass('up down');
            $('.shopClassify_nav .aui-tab-item').eq(2).removeClass('up down');
            $('.shopClassify_nav .aui-tab-item').eq(3).removeClass('up down');
        } else if (ret.index == 2) {
          if (prevIndex == ret.index) {
              $('.shopClassify_nav .aui-tab-item').eq(1).toggleClass('up')
              $('.shopClassify_nav .aui-tab-item').eq(1).toggleClass('down')
              $('.shopClassify_nav .aui-tab-item').eq(1).attr('class').indexOf('up')=='-1' ? app.getList('',3):app.getList('',4)
          } else {
              $('.shopClassify_nav .aui-tab-item').eq(1).addClass('up')
              app.getList('',4)
          }
        } else if (ret.index == 3) {

            if (prevIndex == ret.index) {
                $('.shopClassify_nav .aui-tab-item').eq(2).toggleClass('up')
                $('.shopClassify_nav .aui-tab-item').eq(2).toggleClass('down')
                $('.shopClassify_nav .aui-tab-item').eq(2).attr('class').indexOf('up')=='-1' ? app.getList('',1):app.getList('',2)
            } else {
                $('.shopClassify_nav .aui-tab-item').eq(2).addClass('up')
              app.getList('',2)
            }
        } else if (ret.index == 4) {
            if (prevIndex == ret.index) {
                $('.shopClassify_nav .aui-tab-item').eq(3).toggleClass('up')
                $('.shopClassify_nav .aui-tab-item').eq(3).toggleClass('down')

            } else {
                $('.shopClassify_nav .aui-tab-item').eq(3).addClass('up')

            }
        }
          prevIndex = ret.index
      });
  }

  function close_win(){
    api.closeWin({});
  }

  // function openFilter() {
  //     api.openFrame({
  //         name: 'classClassifyFilter',
  //         url: './class_classify_filter.html',
  //         pageParam:{
  //
  //         }
  //     })
  //  }





</script>
